<template>
    <div class="four">
        <div class="head">
            <img src="../assets/666.jpg" alt="">
            <div class="head nr">
                <p class="head nr sm">{{name}}</p>
                <p class="head nr xm">ID:{{id}}</p>
            </div>
        </div>
        <div class="body">
            <router-link class="btn" to="/yanchuDD">演出订单</router-link>
            <router-link class="btn" to="/zhoubianDD">周边订单</router-link>
            <router-link class="btn" to="/zhongchDD">众筹订单</router-link>
            <router-link class="btn" to="/shoucang">我的收藏</router-link>
            <router-link class="btn" to="/fankui">用户反馈</router-link>
            <router-link class="btn" to="/employeeLoginView">管理员登录</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: sessionStorage.getItem('userName'),
                id: sessionStorage.getItem('userId'),
            }
        },
    }
</script>

<style lang="scss" scoped>
    .four{
        .head{
            display: flex;
            width: 100%;
            img{
                width: 25%;
                height: 25%;
                border-radius: 50%;
                margin-left: 7vw;
                margin-top: 7vw;
            }
            .nr{
                flex-wrap: wrap;
                p{
                    width: 100%;
                    text-align: left;
                    margin-top: 7vw;
                    margin-left: 7vw;
                }
                .sm{
                    font-weight: bold;
                    font-size: 7vw;
                    padding-top: 2vw;
                }
                .xm{
                    // position: absolute;
                    font-size: 5vw;
                    color: #aaa;
                }
            }
        }
        .body{
            margin-top: 12vw;
            display: flex;
            flex-wrap: wrap;
            text-align: left;
            .btn{
                width: 100%;
                padding-left: 7vw;
                padding-top: 5vw;
                padding-bottom: 5vw;
                margin-bottom: 3vw;
                // background: #eee;
                font-size: 5vw;
                font-weight: bold;
                color: #000;
                border: solid;
                border-width: thin;
                border-color: #ccc;
            }
        }
    }

</style>